<template>
  <div class="role-detail-container">
    <!-- 页面标题和操作按钮 -->
    <div class="page-header">
      <h1>角色详情</h1>
      <div class="action-buttons">
        <el-button @click="handleGoBack">
          <el-icon><ArrowLeft /></el-icon> 返回列表
        </el-button>
        <el-button type="primary" @click="handleEdit">
          <el-icon><Edit /></el-icon> 编辑
        </el-button>
        <el-button type="info" @click="handlePermissions">
          <el-icon><Lock /></el-icon> 权限配置
        </el-button>
        <el-button
          :type="roleInfo.status === 1 ? 'danger' : 'success'"
          @click="handleStatusChange"
        >
          {{ roleInfo.status === 1 ? '禁用' : '启用' }}
        </el-button>
      </div>
    </div>

    <!-- 基本信息卡片 -->
    <el-card class="info-card">
      <div class="card-header">
        <h2 class="card-title">基本信息</h2>
      </div>
      <el-descriptions :column="1" border class="info-descriptions">
        <el-descriptions-item label="角色ID">{{ roleInfo.id }}</el-descriptions-item>
        <el-descriptions-item label="角色名称">{{ roleInfo.name }}</el-descriptions-item>
        <el-descriptions-item label="角色编码">{{ roleInfo.code }}</el-descriptions-item>
        <el-descriptions-item label="角色描述">{{ roleInfo.description || '-' }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="roleInfo.status === 1 ? 'success' : 'danger'">
            {{ roleInfo.status === 1 ? '启用' : '禁用' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="关联用户数">{{ roleInfo.userCount }} 人</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ roleInfo.createTime }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ roleInfo.updateTime || '-' }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 权限列表卡片 -->
    <el-card class="info-card">
      <div class="card-header">
        <h2 class="card-title">权限列表</h2>
      </div>
      <div class="permission-tree-container">
        <el-tree
          :data="permissionTree"
          :props="treeProps"
          show-checkbox
          node-key="id"
          :default-checked-keys="checkedPermissions"
          disabled
        ></el-tree>
      </div>
    </el-card>

    <!-- 关联用户卡片 -->
    <el-card class="info-card">
      <div class="card-header">
        <h2 class="card-title">关联用户</h2>
        <el-button size="small" @click="handleViewAllUsers">查看全部</el-button>
      </div>
      <el-table
        :data="relatedUsers"
        border
        stripe
        size="small"
        style="width: 100%"
      >
        <el-table-column prop="id" label="用户ID" width="100" align="center"></el-table-column>
        <el-table-column prop="username" label="用户名" min-width="120"></el-table-column>
        <el-table-column prop="name" label="姓名" min-width="100"></el-table-column>
        <el-table-column prop="email" label="邮箱" min-width="180"></el-table-column>
        <el-table-column prop="status" label="状态" min-width="100" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
              {{ scope.row.status === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="roleInfo.userCount > 5" class="view-more-text">
        仅显示前5条记录，共 {{ roleInfo.userCount }} 条
      </div>
    </el-card>

    <!-- 操作历史卡片 -->
    <el-card class="info-card">
      <div class="card-header">
        <h2 class="card-title">操作历史</h2>
      </div>
      <el-timeline>
        <el-timeline-item
          v-for="(item, index) in roleInfo.operationHistory"
          :key="index"
          :timestamp="item.time"
          :type="item.type"
          :color="item.color"
        >
          <el-card>
            <h4>{{ item.title }}</h4>
            <p>{{ item.content }}</p>
            <p class="operator">操作人：{{ item.operator }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import {
  ArrowLeft,
  Edit,
  Lock
} from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';

// 路由实例
const router = useRouter();
const route = useRoute();

// 角色信息
const roleInfo = reactive({
  id: '',
  name: '',
  code: '',
  description: '',
  status: 1,
  userCount: 0,
  createTime: '',
  updateTime: '',
  operationHistory: []
});

// 权限树形数据
const permissionTree = ref<any[]>([]);
// 选中的权限ID
const checkedPermissions = ref<string[]>([]);
// 树形配置
const treeProps = { label: 'name', children: 'children' };

// 关联用户列表
const relatedUsers = ref<any[]>([]);

// 加载状态
const loading = ref<boolean>(true);

// 返回列表
const handleGoBack = () => {
  router.push({ name: 'RoleList' });
};

// 编辑角色
const handleEdit = () => {
  router.push({ name: 'RoleEdit', params: { id: roleInfo.id } });
};

// 权限配置
const handlePermissions = () => {
  router.push({ name: 'RolePermission', params: { id: roleInfo.id } });
};

// 查看全部用户
const handleViewAllUsers = () => {
  ElMessage.info('查看全部用户功能待实现');
};

// 切换角色状态
const handleStatusChange = async () => {
  const newStatus = roleInfo.status === 1 ? 0 : 1;
  const statusText = newStatus === 1 ? '启用' : '禁用';
  const confirmText = `确定要${statusText}角色